<template>
	<view class="upper-navigation">
		<view class="status-bar-fixed" style="height: var(--status-bar-height);">
			<!-- 所有自定义导航都要加这个，用来处理小程序显示时的手机信号那一栏的高度 -->
		</view>
		<view class="nav-area">
			<navigator url="./Index" class="btn-back">
				<image src="../../static/chevron-left.svg"></image>
			</navigator>
			<view class="title-area">
				地图游览
			</view>
			<view class="action-area"></view>
		</view>
	</view>
	<view id="a-map-container">
		<map :longitude="orgLongitude" :latitude="orgLatitude" :markers="markers" />
	</view>
</template>

<script setup>
	import upperNavigation from './upperNavigation.vue'
	import { ref, reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import setShare from '../../share.js'
	setShare({
		title: '云上埔坪 - 地图浏览',
		path: "/pages/Community/AMap"
	});
	let orgLongitude = 117.391737, orgLatitude = 24.158925;
	let markers = [
		{
			id: 0,
			longitude: orgLongitude,
			latitude: orgLatitude,
			callout: {
				content: '迁台记忆馆（思永楼）',
				display: 'ALWAYS',
				fontSize: 15,
				padding: 10,
				borderRadius: 5
			}
		},
		{
			id: 1,
			longitude: 117.389624,
			latitude: 24.156425,
			callout: {
				content: '林氏宗祠群',
				fontSize: 15,
				padding: 10,
				borderRadius: 5
			}
		},
		{
			id: 2,
			longitude: 117.38905,
			latitude: 24.15549,
			callout: {
				content: '绥丰楼',
				fontSize: 15,
				padding: 10,
				borderRadius: 5
			}
		},
		{
			id: 3,
			longitude: 117.392724,
			latitude: 24.158219,
			callout: {
				content: '埔坪村委会',
				fontSize: 15,
				padding: 10,
				borderRadius: 5
			}
		}
	]
</script>

<style lang="less">
	@title-size: 35rpx;
	@title-height: @title-size * 3;
	
	.upper-navigation {
		.nav-area {
			display: flex;

			.btn-back {
				display: block;
				flex: 0 0 @title-height; 
				height: @title-height;
				position: relative;
				image {
					width: @title-height * .75;
					height: @title-height * .75;					
					
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
			.action-area {
				display: block;
				flex: 0 0 @title-height; 
			}

			.title-area {
				flex: 1;
				font-size: @title-size;
				line-height: @title-height;
				text-align: center;
				border-bottom: 1rpx solid #d4c4c4;
			}
		}
	}
	#a-map-container {
		position:absolute;
		top: calc(var(--status-bar-height) + @title-height);
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		color:red;
		map {
			width: 100%;
			height: 100%;
		}
	}
</style>